<template>
    <el-breadcrumb   separator="/">
        <el-breadcrumb-item  v-for="item in BreadCrumbList" :key="item.path" :to="{ name:item.name }">
            {{ item.label }}
        </el-breadcrumb-item>

    </el-breadcrumb>
</template>

<script>
import { routes } from '@/router'
export default {
    data() {
        this.routesMap = new Map();
        return {
            BreadCrumbList: []
        }
    },
    watch: {
        $route: {
            immediate: true,
            handler(route) {
                this.initRoutes(routes);
                this.BreadCrumbList = route.matched.map(item => {
                    return {
                        name: item.name,
                        label: this.routesMap.get(item.name)
                    }
                })
            }
        }
    },
    methods: {
        initRoutes(routes) {
            routes.forEach(route => {
                this.routesMap.set(route.name, route.label)
                route.children && this.initRoutes(route.children)
            });
        }
    }
}
</script>

<style lang="scss" scoped></style>
